<template>
    <div class="iChat">
        <h1>websocket</h1>
        <div class="container">
            <div class="content">
                <div class="item item-center"><span>昨天 12:35</span></div>
                <div class="item item-left">
                    <div class="avatar">
                        <img
                                src="https://p.qqan.com/up/2020-8/15979703206228498.jpg"
                        />
                    </div>
                    <div class="bubble bubble-left">你发一个<br />刚刚网卡了</div>
                </div>
                <!-- 3.循环数组，在页面上进行显示  -->
                <div class="item item-right" v-for="(item, index) in receivedMessage" :key="index">
                    <div class="bubble bubble-right">{{item}}</div>
                    <div class="avatar">
                        <img src="https://ts1.cn.mm.bing.net/th/id/R-C.4fb814bf3889e0906f86e8985d3f995e?rik=DTtrRT01QslGWg&riu=http%3a%2f%2fwww.kuaipng.com%2fUploads%2fpic%2fw%2f2020%2f06-13%2f85303%2fwater_85303_698_698_.png&ehk=ah3XedFm1TEu8yK0Y%2f%2byAXlfocUNSR9vMsdOle9aOaw%3d&risl=&pid=ImgRaw&r=0"/>
                    </div>
                </div>
            </div>
            <div class="input-area">
                <!-- 文本框 -->
                <textarea v-model="message" id="textarea" @keyup.enter="sendMessage()"></textarea>
                <div class="button-area">
                    <button id="send-btn" @click="sendMessage()">发 送</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    // eslint-disable-next-line no-unused-vars
    import Aside from "@/components/Aside";
    export default {
        name: "WebSocketDemo",
        data() {
            return {
                //4.赋值存储 ws
                ws:null,
                message:'',
                receivedMessage:[],
            };
        },
        mounted() {
            //2.挂载
            this.initWebSocket()
        },
        methods: {
            //1.建立webSocket连接
            initWebSocket(){
                const userId = "用户1" + Math.floor(Math.random() * 1000);
                //3.建立链接接口 //用账号替代
                this.ws = new WebSocket('ws://127.0.0.1:8080/LuLi/websocketPojo/' + 1128)

                //打开事件
                this.ws.onopen = function(){
                    console.log("websocket已打开");
                }

                //消息事件
                this.ws.onmessage = (event) => {
                    //1.因为是群体广播需要需要一个数组存储，进行push推入同一个数组
                    this.receivedMessage.push(JSON.parse(event.data));
                    console.log(this.receivedMessage)
                }

                //关闭事件
                this.ws.onclose = function() {
                    console.log("websocket已关闭");
                };
                //错误事件
                this.ws.onerror = function() {
                    console.log("websocket发生了错误");
                };
            },

            //6.发送消息到服务器
            sendMessage(){
                this.ws.send(this.message);
                this.message = '';
            }
        },
    };
</script>
<style lang="scss" scoped>
    .container{
        height: 666px;
        border-radius: 4px;
        border: 0.5px solid #e0e0e0;
        background-color: #f5f5f5;
        display: flex;
        flex-flow: column;
        overflow: hidden;
    }
    .content{
        width: calc(100% - 40px);
        padding: 20px;
        overflow-y: scroll;
        flex: 1;
    }
    .content:hover::-webkit-scrollbar-thumb{
        background:rgba(0,0,0,0.1);
    }
    .bubble{
        max-width: 400px;
        padding: 10px;
        border-radius: 5px;
        position: relative;
        color: #000;
        word-wrap:break-word;
        word-break:normal;
    }
    .item-left .bubble{
        margin-left: 15px;
        background-color: #fff;
    }
    .item-left .bubble:before{
        content: "";
        position: absolute;
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-top: 10px solid transparent;
        border-right: 10px solid #fff;
        border-bottom: 10px solid transparent;
        left: -20px;
    }
    .item-right .bubble{
        margin-right: 15px;
        background-color: #9eea6a;
    }
    .item-right .bubble:before{
        content: "";
        position: absolute;
        width: 0;
        height: 0;
        border-left: 10px solid #9eea6a;
        border-top: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 10px solid transparent;
        right: -20px;
    }
    .item{
        margin-top: 15px;
        display: flex;
        width: 100%;
    }
    .item.item-right{
        justify-content: flex-end;
    }
    .item.item-center{
        justify-content: center;
    }
    .item.item-center span{
        font-size: 12px;
        padding: 2px 4px;
        color: #fff;
        background-color: #dadada;
        border-radius: 3px;
        -moz-user-select:none; /*火狐*/
        -webkit-user-select:none; /*webkit浏览器*/
        -ms-user-select:none; /*IE10*/
        -khtml-user-select:none; /*早期浏览器*/
        user-select:none;
    }

    .avatar img{
        width: 42px;
        height: 42px;
        border-radius: 50%;
    }
    .input-area{
        border-top:0.5px solid #e0e0e0;
        height: 150px;
        display: flex;
        flex-flow: column;
        background-color: #fff;
    }
    textarea{
        flex: 1;
        padding: 5px;
        font-size: 14px;
        border: none;
        cursor: pointer;
        overflow-y: auto;
        overflow-x: hidden;
        outline:none;
        resize:none;
    }
    .button-area{
        display: flex;
        height: 40px;
        margin-right: 10px;
        line-height: 40px;
        padding: 5px;
        justify-content: flex-end;
    }
    .button-area button{
        width: 80px;
        border: none;
        outline: none;
        border-radius: 4px;
        float: right;
        cursor: pointer;
    }

    /* 设置滚动条的样式 */
    ::-webkit-scrollbar {
        width:10px;
    }
    /* 滚动槽 */
    ::-webkit-scrollbar-track {
        /*-webkit-box-shadow:inset006pxrgba(0,0,0,0.3);*/
        border-radius:8px;
    }
    /* 滚动条滑块 */
    ::-webkit-scrollbar-thumb {
        border-radius:10px;
        background:rgba(0,0,0,0);
        /*-webkit-box-shadow:inset006pxrgba(0,0,0,0.5);*/
    }
</style>
